<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JSDoc: Source: packages/scatter/src/scatter.vue</title>

    <script src="scripts/prettify/prettify.js"> </script>
    <script src="scripts/prettify/lang-css.js"> </script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>

<body>

<div id="main">

    <h1 class="page-title">Source: packages/scatter/src/scatter.vue</h1>

    



    
    <section>
        <article>
            <pre class="prettyprint source linenums"><code>&lt;template>
  &lt;div>&lt;/div>
&lt;/template>

&lt;script>
  /**
   * 水波涟漪动画组件
   * @module xdh-map-scatter
   */
  import {mapReady, getParent} from 'utils/util' 
  import CleanMixin from 'utils/mixins/clean'
  import Feature from 'ol/Feature'
  import {parseStyle} from '../../../packages'
  import {easeOut} from 'ol/easing'; 
  import Point from 'ol/geom/Point'

  const DURATION = function (start, end) {
    return start + Math.round((end - start) * Math.random())
  }

  export default {
    name: 'XdhMapScatter',
    mixins: [CleanMixin],
    components: {
    },
    /**
     * 参数属性
     * @member props
     * @property {array[]} data 散点数据 
     * @property {number} data.inner // 散点内半径
     * @property {number} data.outer // 散点扩散范围
     * @property {array} data.position // 散点位置
     * @property {color} data.color // 散点颜色值（rgb）
     * @property {zIndex} zIndex // 层级
     */
    props: {
      data: {
        type: Array,
        default: () => { return [] }
      },
      zIndex: {
        type: Number,
        default: 1
      }
      // color: {
      //   type: String,
      //   default: '255, 0, 0'
      // },
      // inner: {
      //   type: Number,
      //   default: 10
      // },
      // outer: {
      //   type: Number,
      //   default: 20
      // },
      // position: {
      //   type: Array,
      //   default: () => { return [0, 0] }
      // }
    },
    data() {
      return {
        map: null,
        parent: null,
        now: null, 
        scatters: [],
        scater: null,
        coreStyle: null,
        duration: DURATION(1000, 2000) // 1200
      }
    },
    computed: {
      
    },
    methods: {
      ready(map, comp) {
        this.map = map
         
        this.createPoint()
      
      },
      createPoint() {
        
        this.data.forEach((item) => {
          let feature = new Feature({
            geometry: new Point(item.position)
          })
          let coreStyle = this._coreStyle(item)
          let outStyle = this._defaultOuterStyle(item.inner, item.color)
          feature.setStyle([coreStyle, outStyle])
          
          this.scatters.push(feature)
        })
 
        this.parent.addFeature(this.scatters)
        
        this.animateStart()
         
        // this.bindEvents()
      },
      animateStart() {
        this.now = new Date().getTime();
        
        window.requestAnimationFrame(this.expand)
        // this.map.on('postrender', () => {
        //   this.expand()
        // })
      },
      expand() {
        let current = new Date().getTime()
        let elapsed = current - this.now 
        let elapsedRatio = elapsed / this.duration

        this.data.forEach((item, index) => {
          let radius1 = item.inner + (elapsedRatio * item.outer)
          let opacity1 = easeOut(elapsedRatio)
          const expandOuter = this._expandOuterStyle(item.color, radius1, opacity1)
          this.scatters[index].setStyle([this._coreStyle(item), expandOuter])
        })
        if (elapsed > this.duration) { 
          this.now = new Date().getTime()
        } 
        
        window.requestAnimationFrame(this.expand)
        
      },
      bindEvents() {
        let obj = Object.assign({}, this.$listeners) 
        for (let key in obj) {
          if (key === 'mouseLeave' || key === 'mouseEnter' || key === 'pointermove') {
            
            return
          } else {
            this.parent._bind(key, this.scatter, obj[key], this._uid)
          }
        }
      },
      _coreStyle(data) {
        return parseStyle({
          className: 'Style',
          zIndex: this.zIndex,
          image: {
            className: 'Circle',
            radius: data.inner,
            fill: {
              className: 'Fill',
              color: `rgba(${data.color}, 1)`
            }
          } 
        })
      },
      _defaultOuterStyle(inner, color) {
        return parseStyle({
          className: 'Style',
          zIndex: this.zIndex,
          image: {
            className: 'Circle',
            radius: inner,
            fill: {
              className: 'Fill',
              color: 'transparent'
            },
            stroke: {
              className: 'Stroke',
              color: `rgba(${color}, 1)`,
              width: 2
            }
          } 
        })
      },
      _expandOuterStyle(color, radius, opacity) {
        return parseStyle({
          className: 'Style',
          zIndex: this.zIndex,
          image: {
            className: 'Circle',
            radius: radius,
            fill: {
              className: 'Fill',
              color: `rgba(${color}, ${(1 - opacity) * 0.6})`
            },
            stroke: {
              className: 'Stroke',
              color: `rgba(${color}, ${1 - opacity})`, 
              width: 2
            } 
          }
        })
      }
    },
    created() {
      this.parent = getParent.call(this)
    },
    mounted() {
      mapReady.call(this, this.ready)
    }
  }
&lt;/script>
</code></pre>
        </article>
    </section>




</div>

<nav>
    <h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-xdh-map.html">xdh-map</a></li><li><a href="module-xdh-map-circle.html">xdh-map-circle</a></li><li><a href="module-xdh-map-dialog.html">xdh-map-dialog</a></li><li><a href="module-xdh-map-draw.html">xdh-map-draw</a></li><li><a href="module-xdh-map-draw-arc.html">xdh-map-draw-arc</a></li><li><a href="module-xdh-map-draw-panel.html">xdh-map-draw-panel</a></li><li><a href="module-xdh-map-drawdown.html">xdh-map-drawdown</a></li><li><a href="module-xdh-map-echarts.html">xdh-map-echarts</a></li><li><a href="module-xdh-map-geo-layer.html">xdh-map-geo-layer</a></li><li><a href="module-xdh-map-group.html">xdh-map-group</a></li><li><a href="module-xdh-map-heat.html">xdh-map-heat</a></li><li><a href="module-xdh-map-html.html">xdh-map-html</a></li><li><a href="module-xdh-map-icon.html">xdh-map-icon</a></li><li><a href="module-xdh-map-image.html">xdh-map-image</a></li><li><a href="module-xdh-map-line.html">xdh-map-line</a></li><li><a href="module-xdh-map-mask.html">xdh-map-mask</a></li><li><a href="module-xdh-map-measure.html">xdh-map-measure</a></li><li><a href="module-xdh-map-overview.html">xdh-map-overview</a></li><li><a href="module-xdh-map-panel.html">xdh-map-panel</a></li><li><a href="module-xdh-map-placement.html">xdh-map-placement</a></li><li><a href="module-xdh-map-pointer.html">xdh-map-pointer</a></li><li><a href="module-xdh-map-polygon.html">xdh-map-polygon</a></li><li><a href="module-xdh-map-popup.html">xdh-map-popup</a></li><li><a href="module-xdh-map-rectangle.html">xdh-map-rectangle</a></li><li><a href="module-xdh-map-scatter.html">xdh-map-scatter</a></li><li><a href="module-xdh-map-text.html">xdh-map-text</a></li><li><a href="module-xdh-map-track.html">xdh-map-track</a></li><li><a href="module-xdh-map-type.html">xdh-map-type</a></li><li><a href="module-xdh-map-warp.html">xdh-map-warp</a></li><li><a href="module-xdh-map-zoom.html">xdh-map-zoom</a></li><li><a href="module-xdh-map-zoom-panel.html">xdh-map-zoom-panel</a></li></ul><h3>Classes</h3><ul><li><a href="ol.interaction.areaSelect.html">areaSelect</a></li><li><a href="ol.interaction.drag.html">drag</a></li><li><a href="ol.source.TileSuperMapRest.html">TileSuperMapRest</a></li></ul><h3>Events</h3><ul><li><a href="module-xdh-map-type.html#~event:change">change</a></li><li><a href="module-xdh-map.html#~event:changeType">changeType</a></li><li><a href="module-xdh-map-pointer.html#~event:copy">copy</a></li><li><a href="module-xdh-map-draw.html#~event:drawend">drawend</a></li><li><a href="module-xdh-map-draw.html#~event:drawstart">drawstart</a></li><li><a href="module-xdh-map-draw.html#~event:modifyend">modifyend</a></li><li><a href="module-xdh-map-draw.html#~event:modifystart">modifystart</a></li><li><a href="module-xdh-map-geo-layer.html#~event:mouseEnter">mouseEnter</a></li><li><a href="module-xdh-map-track.html#~event:move">move</a></li><li><a href="global.html#event:on-boxEnd">on-boxEnd</a></li><li><a href="global.html#event:on-boxStart">on-boxStart</a></li><li><a href="global.html#event:on-dragDown">on-dragDown</a></li><li><a href="global.html#event:on-dragMove">on-dragMove</a></li><li><a href="global.html#event:on-dragUp">on-dragUp</a></li><li><a href="module-xdh-map-draw-panel.html#~event:on-draw">on-draw</a></li><li><a href="module-xdh-map-draw-panel.html#~event:on-draw-end">on-draw-end</a></li><li><a href="module-xdh-map-draw-panel.html#~event:on-edit-start">on-edit-start</a></li><li><a href="module-xdh-map-draw-panel.html#~event:on-finish-draw">on-finish-draw</a></li><li><a href="module-xdh-map-draw-panel.html#~event:on-finish-edit">on-finish-edit</a></li><li><a href="module-xdh-map-draw-panel.html#~event:on-inited">on-inited</a></li><li><a href="module-xdh-map-measure.html#~event:on-measureEnd">on-measureEnd</a></li><li><a href="module-xdh-map-drawdown.html#~event:on-toggle">on-toggle</a></li><li><a href="module-xdh-map.html#~event:ready">ready</a></li><li><a href="module-xdh-map-track.html#~event:start">start</a></li><li><a href="module-xdh-map-track.html#~event:stop">stop</a></li></ul><h3>Global</h3><ul><li><a href="global.html#bd09ToGcj02">bd09ToGcj02</a></li><li><a href="global.html#bd09ToGps84">bd09ToGps84</a></li><li><a href="global.html#bd09ToWgs84">bd09ToWgs84</a></li><li><a href="global.html#capitalize">capitalize</a></li><li><a href="global.html#convertToWgs84">convertToWgs84</a></li><li><a href="global.html#createLayer">createLayer</a></li><li><a href="global.html#createTdtLayer">createTdtLayer</a></li><li><a href="global.html#D2R">D2R</a></li><li><a href="global.html#featureStyleRender">featureStyleRender</a></li><li><a href="global.html#gcj02ToBd09">gcj02ToBd09</a></li><li><a href="global.html#gcj02ToWgs84">gcj02ToWgs84</a></li><li><a href="global.html#gcjToGps84">gcjToGps84</a></li><li><a href="global.html#get">get</a></li><li><a href="global.html#getDistance">getDistance</a></li><li><a href="global.html#getParent">getParent</a></li><li><a href="global.html#gps84ToGcj02">gps84ToGcj02</a></li><li><a href="global.html#keyMap">keyMap</a></li><li><a href="global.html#LAYERS">LAYERS</a></li><li><a href="global.html#mapReady">mapReady</a></li><li><a href="global.html#mix">mix</a></li><li><a href="global.html#mixProps">mixProps</a></li><li><a href="global.html#options">options</a></li><li><a href="global.html#outOfChina">outOfChina</a></li><li><a href="global.html#pi">pi</a></li><li><a href="global.html#prefix">prefix</a></li><li><a href="global.html#props">props</a></li><li><a href="global.html#set">set</a></li><li><a href="global.html#StyleMap">StyleMap</a></li><li><a href="global.html#wgs84ToBd09">wgs84ToBd09</a></li><li><a href="global.html#wgs84ToGcj02">wgs84ToGcj02</a></li></ul>
</nav>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Sat Mar 21 2020 16:40:44 GMT+0800 (GMT+08:00)
</footer>

<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>
